import React from 'react'
import Home from '../pages/home'
import About from '../pages/about2'
import Profile from '../pages/profile'
import ProfileSearch from '../pages/profile-search'
import Login from '../pages/login'
import Development from '../pages/development'
import Cultures from '../pages/cultures'
import Loading from '../pages/loading'

/** 1、依赖 React.lazy + React.Suspense*/
const Join = React.lazy(() => import('../pages/join'))

const routes = [
  {
    path: '',
    element: <Home />,
    exact: true,
  },
  {
    path: 'about',
    element: <About />,
    children: [
      {
        path: '',
        element: <Development />,
      },
      {
        path: 'cultures',
        element: <Cultures />,
      },
      {
        path: 'contact',
        /**2、 react-router 自带的 route.lazy */
        lazy: async () => ({
          Component: (await import('../pages/contact')).default,
        })
      },
      {
        path: 'join',
        element: (
          <React.Suspense fallback={<Loading />}>
            <Join />
          </React.Suspense>
        )
      },
    ]
  },
  {
    path: 'user/:id',
    element: <Profile />,
  },
  {
    path: 'profile',
    element: <ProfileSearch />,
  },
  {
    path: 'login',
    element: <Login />,
  },
]

export default routes